﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <title>九宫格 抽奖转盘演示</title>
    <style type="text/css">
        #lottery
        {
            width: 90%;
            height: 584px;
            margin: 20px auto 0;
        }
        #lottery table td
        {
            width: 100px;
            height: 100px;
            text-align: center;
            vertical-align: middle;
            font-size: 24px;
            color: #333;
            font-index: -999;
        }
        #lottery table td a
        {
            width: 100px;
            height: 100px;
            line-height: 80px;
            display: block;
            text-decoration: none;
        }
        #lottery table td.active
        {
            background-color: #ea0000;
        }
    </style>
</head>
<body>
    <div id="lottery">
        <table border="1" cellpadding="1" cellspacing="1">
            <tr>
                <td class="lottery-unit lottery-unit-0">
                    奖1
                </td>
                <td class="lottery-unit lottery-unit-1">
                    奖2
                </td>
                <td class="lottery-unit lottery-unit-2">
                    奖3
                </td>
                <td class="lottery-unit lottery-unit-3">
                    奖4
                </td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-11">
                    奖12
                </td>
                <td colspan="2" rowspan="2">
                    <a href="#">抽奖</a>
                </td>
                <td class="lottery-unit lottery-unit-4">
                    奖5
                </td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-10">
                    奖11
                </td>
                <td class="lottery-unit lottery-unit-5">
                    奖6
                </td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-9">
                    奖10
                </td>
                <td class="lottery-unit lottery-unit-8">
                    奖9
                </td>
                <td class="lottery-unit lottery-unit-7">
                    奖8
                </td>
                <td class="lottery-unit lottery-unit-6">
                    奖7
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        function prizeRand(oArr) {
            var sum = 0;    // 总和
            var rand = 0;   // 每次循环产生的随机数
            var result = 0; // 返回的对象的key
            // 计算总和
            for (var i in oArr) {
                sum += oArr[i][1];
            }
            
            // 思路就是如果设置的数落在随机数内，则返回，否则减去本次的数
            for (var i in oArr) {
                rand = Math.floor(Math.random() * sum + 1);
                //alert(oArr[i][1] + ':' + rand);
                if (oArr[i][1] >= rand) {
                    result = oArr[i][0];
                    break;
                } else {
                    sum -= oArr[i][1];
                }
            }
            return result;
        }

        var oArr = { '1': [1, 3], '2': [2, 2], '3': [3, 2], '4': [4, 93], '5': [5, 100] };

        alert('概率：'+prizeRand(oArr));
    </script>
    <script type="text/javascript">
        var lottery = {
            index: -1, //当前转动到哪个位置，起点位置
            count: 0, //总共有多少个位置
            timer: 0, //setTimeout的ID，用clearTimeout清除
            speed: 20, //初始转动速度
            times: 0, //转动次数
            cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: -1, //中奖位置
            init: function (id) {
                if ($("#" + id).find(".lottery-unit").length > 0) {
                    $lottery = $("#" + id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find(".lottery-unit-" + this.index).addClass("active");
                };
            },
            roll: function () {
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".lottery-unit-" + index).removeClass("active");
                index += 1;
                if (index > count - 1) {
                    index = 0;
                };
                $(lottery).find(".lottery-unit-" + index).addClass("active");
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };

        function roll() {
            lottery.times += 1;
            lottery.roll();
            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
                clearTimeout(lottery.timer);
                lottery.prize = -1;
                lottery.times = 0;
                //alert(lottery.index);
                click = false;
            } else {
                if (lottery.times < lottery.cycle) {
                    lottery.speed -= 10;
                } else if (lottery.times == lottery.cycle) {
                    var rd = Math.random();
                    alert(rd);
                    alert(Math.floor(rd * 5));
                    var index = 0;
                    if (rd < 0.8)
                        index = 3 || 9;
                    else
                        index = rd * (lottery.count) | 0;
                    lottery.prize = index;
                } else {
                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                        lottery.speed += 110;
                    } else {
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed < 40) {
                    lottery.speed = 40;
                };
                //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
                lottery.timer = setTimeout(roll, lottery.speed);
            }
            return false;
        }

        var click = false;

        window.onload = function () {
            lottery.init('lottery');
            $("#lottery a").click(function () {
                if (click) {
                    return false;
                } else {
                    lottery.speed = 100;
                    roll();
                    click = true;
                    return false;
                }
            });
        };
    </script>
</body>
</html>
